<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        /*
            Vue 是采用数据劫持结合发布者-订阅者模式,通过Object.defineProperty来劫持各个属性的
            setter,getter,在数据变动时，发布消息给订阅者
        */ 
        /*
            const obj = {}
            Object.defineProperty(obj, 'foo', {
                get() {
                    console.log(`get foo:${val}`);
                        return val
                    },
                set(newVal) {
                    if (newVal !== val) {
                        console.log(`set foo:${newVal}`);
                        val = newVal
                        }
                    }
                })
            }

            缺点: 通过下标修改数组或者给对象新增属性，都不能触发组件的重新渲染,拦截不到

            export default {
                data(){
                    return{
                        user:{
                            name:'Alice',
                            age: 25
                        }
                    }
                },
                methods:{
                    addEmail(){
                        // 方式1 
                        this.$set(this.user,'email','alice@example.com')
                        // 方式2
                        Vue.set(this.user,'email','alice@example.com')
                    }
                }
            }

            Vue.set的用法是(target,key,value)
        */ 
    </script>
</body>
</html>